<template>
    <div class="tabbar">
        <span @click="gaoliang(index)" :class="{active:currentIndex == index}" v-for="(item,index) in myList" :key="index">{{item}}</span>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentIndex : 0,
            myList: ['首页','订单','我的'],
        };
    },
    methods: {
        gaoliang(index){
            this.currentIndex = index
        }
    },
}
</script>

<style scoped>
    .tabbar {
        width: 100%;
        position: fixed;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 50px;
        bottom: 0;
        background-color: skyblue;
        border-top: 1px solid #ccc;

    }
     .tabbar span.active {
        border-bottom: 2px solid rgb(41, 241, 41);
     }
</style>